<template>
  <div class="admin-dashboard">
   
    <aside class="admin-sidebar">
      <ul>
        <li @click="currentTab = 'stores'">门店管理</li>
        <li @click="currentTab = 'products'">产品管理</li>
        <li @click="currentTab = 'users'">用户管理</li>
        <li @click="currentTab = 'stats'">数据统计</li>
      </ul>
    </aside>

    <main class="admin-content">
      <component :is="currentView" />
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import StoreManager from '@/components/StoreManager.vue'
import ProductManager from '@/components/ProductManager.vue'
import UserManager from '@/components/UserManager.vue'
import StatsPanel from '@/components/StatsPanel.vue'

const currentTab = ref('stores')
// 返回首页的方法

const currentView = computed(() => {
  switch (currentTab.value) {
    case 'stores': return StoreManager
    case 'products': return ProductManager
    case 'users': return UserManager
    case 'stats': return StatsPanel
    default: return StoreManager
  }
})
</script>

<style scoped>
.admin-dashboard {
  display: flex;
  height: 100vh;
  position: relative; /* 确保按钮不会影响布局 */
}
.home-button {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: rgb(22, 189, 208);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.home-button:hover {
  background-color: #e2f2f4; /* Darker shade on hover */
}

.admin-dashboard {
  display: flex;
  height: 100vh;
}
.admin-sidebar {
  width: 220px;
  background: #f9f5f0;
  padding: 20px;
  border-right: 1px solid #ddd;
}
.admin-sidebar h2 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #4a2e18;
}
.admin-sidebar ul {
  list-style: none;
  padding: 0;
}
.admin-sidebar li {
  padding: 10px;
  cursor: pointer;
  color: #4a2e18;
  border-radius: 6px;
}
.admin-sidebar li:hover {
  background-color: #fff3e6;
}
.admin-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}
</style>
